<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-07-13 09:20:15
 * @LastEditors: charles
 * @LastEditTime: 2021-08-01 14:09:00
-->
<template>
  
  <div class="head">
    <div class="wrapper">
      <div class="logo">logo</div>
      <div class="title" @click="toHomeHandler()">行学天下</div>
      <div class="category">
        <ul>
          <li @click="toListHandler(item.id)" v-for="item in categorys" :key="item.id">{{item.name}}</li>
        </ul>
      </div>
      <div class="contact" @click="contactHandler()">联系我们</div>
    </div>
  </div>
</template>
<script>
import {get} from '../../utils/request'
export default {
  // 存放数据
  data(){
    return{
      //所有分类信息
      categorys:[],
      //所有轮播图信息
      carousels:[],
    }
  },
  // 存放方法
  methods:{
    // 跳转到list页面
    toListHandler(id){
      this.$router.push({path:'/List',query:{categoryId:id}})
    },
    // 跳转到首页
    toHomeHandler(){
      this.$router.push({path:'/home'})
    },
    // 跳转到联系我们页面
    contactHandler(){
      // 跳转页面
      this.$router.push({path:'/contact'})
    },
    // 查询所有分类信息
    findAllCategory(){
      // 数据交互
        get('/index/category/findCategoryTree').then(res=>{
        // console.log(res);
        if(res.status == 200){
          this.categorys = res.data
        }else{
          this.$message({
            type:'error',
            message:res.message
          })
        }
      })
    },
  },
  // 生命周期钩子函数
  created(){
    // 调用查询所有栏目信息的方法
    this.findAllCategory()
  }
}
</script>

<style scoped lang='scss'>
  
  .wrapper{
    width: 98%;
    height: 68px;
    line-height:60px ;
  }
  .logo{
    float: left;

  }
  .title{
    float: left;
    font-size: 20px;
    font-weight: 700;
    padding:  0 0.5em ;
  }
  .category{
    float: left;
    cursor: pointer;
  }
  .category>ul>li{
    float: left;
    padding:  0 0.5em ;
  }
  .contact{
    float: right;
  }
</style>